<template>
    <div>
        <el-col :span="24" class="action-bar">
            <el-button type="primary" size="medium" @click="reBack">返回</el-button>
        </el-col>
        <el-form :label-position="'left'" label-width="80px" >
            <el-form-item label="封面图片" >
            <el-upload
                class="avatar-uploader"
                action="https://bibiji.rzkeji.com/api/file/upload-img"
                name="photo"
                :show-file-list="false"
                :on-success="handlePhoto"
                :before-upload="beforeAvatarUpload">
                <img v-if="photoImg" :src="photoImg" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="标题">
                <el-input v-model="member.title" ></el-input>
            </el-form-item>
            
            <el-form-item label="描述">
                <el-input v-model="member.desc" ></el-input>
            </el-form-item> 
            
            <el-form-item label="正文详情">
                <vue-ueditor-wrap v-model="member.content" :config="myConfig" @ready="ready"></vue-ueditor-wrap>
            </el-form-item>
            
            <div  class="add-table-wrapper">
                <el-button type="primary" @click="commit" class="add-table-wrapper-btn">发布</el-button>
            </div>
        </el-form>
    </div>
</template>
<script>
export default {
    data(){
        return{
            id:'',
            photoImg:'',
            photoID:'',
            member:{
                title:'',
                desc:'',
                content:'',
            },
            myConfig: {
                // 编辑器不自动被内容撑高
                autoHeightEnabled: false,
                // 初始容器高度
                initialFrameHeight: 500,
                // 初始容器宽度
                initialFrameWidth: '100%',
                // serverUrl: 'http://35.201.165.105:8000/controller.php',
                serverUrl:'https://bibiji.rzkeji.com/ueditor-php/controller.php',
                // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
                UEDITOR_HOME_URL: '/static/UEditor/'
                }

        }
    },
    methods:{
        reBack(){
            this.$router.replace('SystemMsgList')
        },
        beforeAvatarUpload(file) {
			//上传照片前的操作
			// console.log(file,555)
		},
		handlePhoto(res, file) {
			//上传照片成功
			if(res.data){
				this.photoImg=res.data.img_url;
				this.photoId=res.data.id;
			}
		},
        ready(editorInstance){
            // 保存原始的 getActionUrl 方法
                // if(!UE.Editor.prototype._bkGetActionUrl){
                //     UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
                // }
                // // 自定义
                // UE.Editor.prototype.getActionUrl = function (action) {
                //     console.log(action)
                //     if (action == 'uploadimage') {
                //     return `https://shop.rzkeji.com/api/other/ueditorAction?action=uploadimage`; // 调整上传图片的接口
                //     } else if (action == 'uploadVideo') {
                //     return `https://shop.rzkeji.com/api/other/ueditorAction?action=uploadVideo`; // 调整上传视频接口
                //     } else {
                //     return this._bkGetActionUrl.call(this, action); // 其他上传使用原始的 getActionUrl 方法
                //     }
                // }
        },
        async getSysNewsDetail(){
            //获取详情
            let params={id:this.id,user_token:this.user_token}
          let res=await  this.$api.getSysNewsDetail(params) 
          if(res.data.level=='success' &&res.data.data){
              let data=res.data.data
              this.member.title=data.title;
              this.member.desc=data.desc;
              this.member.content=data.content||'';
              this.photoId=data.thumb_id;
              this.photoImg=data.thumb_url;
          }
        },
        async commit(){
            let params=this.member;
            params.id=this.id;
            params.thumb_id=this.photoId;
            let res=await this.$api.setSysNews(params);
            if(res.data.level=='success'){
                this.$message({
                    type:'success',
                    message:res.data.message
                })
                setTimeout(()=>{
                    this.$router.push('SystemMsgList')
                },2000)
            }else{
                this.$message({
                type:'error',
                message:res.data.message
            })
            }
            
        }
    },
    mounted() {
        this.id=this.$route.query.id;
        if(this.id){
            this.getSysNewsDetail();
        }
    },
}
</script>
<style lang="scss" scoped>
    .avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
		border: 1px dashed #d9d9d9;
	}
	.avatar {
		width: 178px;
		height: 178px;
		display: block;
		object-fit: contain;
	}
    .add-table-wrapper{
        display: flex;
        justify-content: center;
        padding:30px 0; 
    }
</style>
